<template>
  <div>
    <!-- <button @click="open">{{ miao }}</button> -->
	<tn-action-sheet :maskCloseable="false" :tips="tips" :cancel-btn="false" v-model="show" :list="list" @click="click"></tn-action-sheet>
  </div>
</template>
<script>
let timer_tanchuang
export default {
  name: 'YanZheng',
  props: {
    // 秒
    time: {
      type: Number,
      default: 60 * 10
    }
  },
  data() {
    return {
		tips:{
			text:''
		},
		list:[],
		show: false,
      miao: this.time,
      numer: this.getRandomNumber()
    }
  },
  mounted() {
    this.startBackwards()
  },
  beforeDestroy() {
    this.stopBackward()
  },
  methods: {
	click(e){
		if(this.list[e].text !== this.numer){
			setTimeout(()=>{
				this.show = true
			})
		}else{
			this.startBackwards()
		}
	},
    getRandomNumber(min = 1, max = 99) {
      return Math.floor(Math.random() * (max - min + 1)) + min
    },
    startBackwards() {
      this.stopBackward()
      timer_tanchuang = setTimeout(() => {
        console.log('倒计时--')
        this.open()
        this.stopBackward()
      }, this.time * 1000)
    },
    stopBackward() {
      if (timer_tanchuang) clearTimeout(timer_tanchuang)
    },
    open() {
      this.$emit('open')
	  this.tips.text = `请选择数字 ${this.numer}`
	  this.show = true;
	  this.list = [{"text":this.getRandomNumber()},{"text":this.getRandomNumber()},{"text":this.getRandomNumber()},{"text":this.numer}].sort((a,b)=>a-b);
    }
  }
}
</script>
